<template>
  <el-row :gutter="20">
    <div class="wh-tuiguang"><h2>精选推广</h2></div>
    <el-col :span="8"
      ><div class="grid-content bg-purple">
        <el-row>
          <el-col>
            <el-card :body-style="{ padding: '0px' }">
              <li>
                <router-link to="detailed?loc=1">
                  <img :src="`/imags/${imgs[0]}`" class="image" />
                </router-link>
              </li>
              <div style="padding: 14px">
                <span class="wh-span">{{ didian[0] }}</span>
                <div class="bottom clearfix">
                  <time class="time">{{ currentDate }}</time>
                  <el-button type="primary" size="mini" class="button"
                    ><router-link to="detailed?loc=1"
                      >查看详情</router-link
                    ></el-button
                  >
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div></el-col
    >
    <el-col :span="8"
      ><div class="grid-content bg-purple">
        <el-row>
          <el-col>
            <el-card :body-style="{ padding: '0px' }">
              <li>
                <router-link to="detailed?loc=2"
                  ><img :src="`/imags/${imgs[1]}`" class="image"
                /></router-link>
              </li>
              <div style="padding: 14px">
                <span class="wh-span">{{ didian[1] }}</span>
                <div class="bottom clearfix">
                  <time class="time">{{ currentDate }}</time>
                  <el-button type="primary" size="mini" class="button"
                    ><router-link to="detailed?loc=2"
                      >查看详情</router-link
                    ></el-button
                  >
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div></el-col
    >
    <el-col :span="8"
      ><div class="grid-content bg-purple">
        <el-row>
          <el-col>
            <el-card :body-style="{ padding: '0px' }">
              <li>
                <router-link to="detailed?loc=3">
                  <img :src="`/imags/${imgs[2]}`" class="image" />
                </router-link>
              </li>
              <div style="padding: 14px">
                <span class="wh-span">{{ didian[2] }}</span>
                <div class="bottom clearfix">
                  <time class="time">{{ currentDate }}</time>
                  <el-button type="primary" size="mini" class="button"
                    ><router-link to="detailed?loc=3"
                      >查看详情</router-link
                    ></el-button
                  >
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div></el-col
    >
    <el-col :span="8"
      ><div class="grid-content bg-purple">
        <el-row>
          <el-col>
            <el-card :body-style="{ padding: '0px' }">
              <li>
                <router-link to="detailed?loc=4">
                  <img :src="`/imags/${imgs[3]}`" class="image" />
                </router-link>
              </li>
              <div style="padding: 14px">
                <span class="wh-span">{{ didian[3] }}</span>
                <div class="bottom clearfix">
                  <time class="time">{{ currentDate }}</time>
                  <el-button type="primary" size="mini" class="button"
                    ><router-link to="detailed?loc=4"
                      >查看详情</router-link
                    ></el-button
                  >
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div></el-col
    >
    <el-col :span="8"
      ><div class="grid-content bg-purple">
        <el-row>
          <el-col>
            <el-card :body-style="{ padding: '0px' }">
              <li>
                <router-link to="detailed?loc=5"
                  ><img :src="`/imags/${imgs[4]}`" class="image" />
                </router-link>
              </li>
              <div style="padding: 14px">
                <span class="wh-span">{{ didian[4] }}</span>
                <div class="bottom clearfix">
                  <time class="time">{{ currentDate }}</time>
                  <el-button type="primary" size="mini" class="button"
                    ><router-link to="detailed?loc=5"
                      >查看详情</router-link
                    ></el-button
                  >
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div></el-col
    >
    <el-col :span="8"
      ><div class="grid-content bg-purple">
        <el-row>
          <el-col>
            <el-card :body-style="{ padding: '0px' }">
              <li>
                <router-link to="detailed?loc=6">
                  <img :src="`/imags/${imgs[5]}`" class="image" />
                </router-link>
              </li>
              <div style="padding: 14px">
                <span class="wh-span">{{ didian[5] }}</span>
                <div class="bottom clearfix">
                  <time class="time">{{ currentDate }}</time>
                  <el-button type="primary" size="mini" class="button"
                    ><router-link to="detailed?loc=6"
                      >查看详情</router-link
                    ></el-button
                  >
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div></el-col
    >
  </el-row>
</template>

<style lang="scss">
// 按钮样式
.bottom a {
  text-decoration: none;
  color: #f9fafc;
  font-size: 20px;
}
.btn {
  position: absolute;
  left: 80%;
  top: 77%;
}

.image:hover {
  transform: scale(1.2, 1.2);
  transition: 1s;
}

// 精选推广样式
.wh-tuiguang {
  width: 100%; //div宽度
  background-color: rgb(19, 60, 88); //背景
  color: aliceblue; //字体样色
  text-align: center; //字体居中
  height: 60px; //div高度
  line-height: 60px; //文字在div高度居中
}
.wh-tuiguang h2 {
  margin-top: -20px;
  margin-bottom: 0;
}

/* 卡片样式 */
.button {
  font-size: 25px !important;
}
.wh-span {
  font-size: 25px;
}
//去除列表的标点
li {
  list-style: none;
}
//卡片上的日期时间文字像素
.time {
  font-size: 15px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

/* 分栏间隔布局样式 */
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>

<script>
export default {
  data() {
    return {
      currentDate: new Date(),
      imgs: [],
      didian: [],
    };
  },
  mounted() {
    //获取数据
    this.$axios.get("/").then((result) => {
      //打印数据结果
      console.log(result.data);
      //用变量保存数据结果
      let res = result.data.data;
      //再循环判断数据结果，拿需要的数据
      for (var i in res) {
        if (i >= 4) {
          this.imgs.push(res[i].img);
          this.didian.push(res[i].ctitle);
        }
      }
      console.log(this.didian);
      console.log(this.imgs);
    });
  },
};
</script>